<template>
  <el-card>
    <!-- 玩家列表 -->
    <div class="panel-area">
      <ol class="participants">
        <li v-if="holder">
          <span>{{ holder }}</span>
          <el-tag size="mini">主持</el-tag>
        </li>
        <li v-for="(item,index) in nicknames" :key="index">
          <span>{{ item === nickname ? item+'(我)': item }}</span>
        </li>
      </ol>
    </div>

    <!-- 按钮工具栏 -->
    <div class="panel-area button-area">
      <el-button
        v-if="!isGameState"
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="play"
      >主持游戏</el-button>

      <el-button
        v-if="isGameState && nickname===holder"
        type="warning"
        size="small"
        icon="el-icon-delete"
        @click="stop"
      >终止游戏</el-button>

      <el-button
        v-if="isGameState && nickname!==holder"
        type="success"
        size="small"
        icon="el-icon-magic-stick"
        @click="look"
      >猜答案</el-button>

      <el-button
        v-if="isGameState"
        type="danger"
        size="small"
        icon="el-icon-switch-button"
        @click="outGame"
      >退出游戏</el-button>
    </div>

    <!-- 弹出框：主持人设置答案 -->
    <el-dialog
      title="请设置答案"
      :visible.sync="resultDialogVisible"
      width="30%"
    >
      <el-input v-model="expectImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="resultDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框：答题人设置答案 -->
    <el-dialog
      title="请填写答案"
      :visible.sync="answerDialogVisible"
      width="30%"
    >
      <el-input v-model="inputImageName" placeholder="请输入您的答案" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveAnswerDialogHandler"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {

      resultDialogVisible: false,
      expectImageName: '',
      answerDialogVisible: false,
      inputImageName: '',
      isShow: false
    }
  },

  methods: {
    ...mapActions(['sendstope', 'sendplay', 'daan']),
    saveDialogHandler() {
      this.resultDialogVisible = false
      this.sendstope(this.expectImageName)
    },

    saveAnswerDialogHandler() {
      this.expectImageName = ''
      this.answerDialogVisible = false
      this.daan(this.inputImageName)
    },
    outGame() {
      this.$router.push('/login')
    },
    play() {
      this.resultDialogVisible = true
    },
    stop() {
      this.$confirm('亲，你确定要终止游戏么？', '温馨提示').then(() => {
        // 发送游戏终止的申请 (action)
        // this.$store.dispatch('sendStopGame')
        this.sendplay()
      }).catch(e => {
        console.log(e)
      })
    },
    look() {
      this.answerDialogVisible = true
    }
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapState(['nickname', 'nicknames', 'holder']),
    ...mapGetters(['isGameState'])
  }
}
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
</style>
